<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>域名池管理 - 配置管理系统</title>
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .strategy-selector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .strategy-option {
            padding: 20px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .strategy-option:hover {
            border-color: var(--text-secondary);
        }
        
        .strategy-option.active {
            border-color: var(--accent-color);
            background: var(--bg-tertiary);
        }
        
        .strategy-option.active::before {
            content: '✓';
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--accent-color);
            font-size: 18px;
        }
        
        .strategy-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .strategy-desc {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .url-actions {
            display: flex;
            gap: 10px;
        }
        
        .url-actions button {
            padding: 5px 10px;
            font-size: 11px;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .modal-close {
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-close:hover {
            color: var(--text-secondary);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <div class="logo-icon">CM</div>
                    <div class="logo-text">
                        <h1>Config Manager</h1>
                        <p>v2.0</p>
                    </div>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">主菜单</div>
                    <a href="dashboard.html" class="nav-item">
                        <span class="nav-icon">■</span>
                        <span>控制台</span>
                    </a>
                    <a href="urls.html" class="nav-item active">
                        <span class="nav-icon">🌐</span>
                        <span>域名池管理</span>
                    </a>
                    <a href="users.html" class="nav-item">
                        <span class="nav-icon">👤</span>
                        <span>用户管理</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">系统</div>
                    <a href="#" class="nav-item" onclick="logout(); return false;">
                        <span class="nav-icon">⎋</span>
                        <span>退出登录</span>
                    </a>
                </div>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">A</div>
                    <div class="user-details">
                        <h4 id="userName">Admin</h4>
                        <p id="userRole">管理员</p>
                    </div>
                </div>
            </div>
        </aside>
        
        <!-- 主内容 -->
        <main class="main-content">
            <div class="topbar">
                <div class="topbar-left">
                    <h2>URL Pool Management</h2>
                </div>
                <div class="topbar-right">
                    <button class="btn-icon" onclick="loadData()" title="刷新">
                        ⟳
                    </button>
                </div>
            </div>
            
            <div class="content-area">
                <!-- 统计信息 -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
                    <div class="card" style="padding: 20px;">
                        <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 5px;">总 URL 数</div>
                        <div style="font-size: 28px; font-weight: 300;" id="totalUrls">0</div>
                    </div>
                    <div class="card" style="padding: 20px;">
                        <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 5px;">启用的 URL</div>
                        <div style="font-size: 28px; font-weight: 300;" id="activeUrls">0</div>
                    </div>
                    <div class="card" style="padding: 20px;">
                        <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 5px;">当前策略</div>
                        <div style="font-size: 16px; font-weight: 300; text-transform: uppercase;" id="currentStrategy">-</div>
                    </div>
                    <div class="card" style="padding: 20px;">
                        <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 5px;">负载均衡</div>
                        <div style="font-size: 16px; font-weight: 300;">
                            <label class="switch">
                                <input type="checkbox" id="lbEnabled" onchange="toggleLoadBalancing()">
                                <span class="slider"></span>
                            </label>
                            <span id="lbStatus" style="margin-left: 10px;">禁用</span>
                        </div>
                    </div>
                </div>
                
                <!-- 轮询策略选择 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">轮询策略</h3>
                    </div>
                    <div class="card-body">
                        <div class="strategy-selector" id="strategySelector">
                            <div class="strategy-option" data-strategy="round-robin">
                                <div class="strategy-name">Round Robin</div>
                                <div class="strategy-desc">平均轮询 - 依次返回每个 URL,适合流量均匀分配</div>
                            </div>
                            <div class="strategy-option" data-strategy="weighted">
                                <div class="strategy-name">Weighted</div>
                                <div class="strategy-desc">权重轮询 - 根据权重比例分配,适合服务器性能不同的场景</div>
                            </div>
                            <div class="strategy-option" data-strategy="random">
                                <div class="strategy-name">Random</div>
                                <div class="strategy-desc">随机选择 - 随机返回 URL,简单高效</div>
                            </div>
                            <div class="strategy-option" data-strategy="hash">
                                <div class="strategy-name">Hash</div>
                                <div class="strategy-desc">哈希分配 - 基于客户端 IP,同一客户端访问同一 URL</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- URL 列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">URL 列表</h3>
                        <button class="btn btn-primary" onclick="showAddModal()">
                            + 添加 URL
                        </button>
                    </div>
                    <div class="card-body" style="padding: 0;">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>URL</th>
                                    <th>权重</th>
                                    <th>状态</th>
                                    <th>访问次数</th>
                                    <th>描述</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="urlTableBody">
                                <tr>
                                    <td colspan="8" style="text-align: center; padding: 40px;">
                                        <span class="loading"></span> 加载中...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 添加/编辑 URL 模态框 -->
    <div class="modal" id="urlModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">添加 URL</h3>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <form id="urlForm">
                <input type="hidden" id="urlId">
                <div class="form-group">
                    <label class="form-label" for="urlName">名称</label>
                    <input type="text" id="urlName" class="form-input" placeholder="例如: 百度" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="urlAddress">URL</label>
                    <input type="url" id="urlAddress" class="form-input" placeholder="https://example.com" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="urlWeight">权重</label>
                    <input type="number" id="urlWeight" class="form-input" placeholder="1-100" min="1" max="100" value="1">
                    <div style="font-size: 11px; color: var(--text-tertiary); margin-top: 5px;">
                        权重越高,被选中的概率越大 (仅权重模式有效)
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="urlDescription">描述</label>
                    <textarea id="urlDescription" class="form-input" rows="3" placeholder="URL 描述信息"></textarea>
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" id="urlEnabled" checked>
                        <span>启用此 URL</span>
                    </label>
                </div>
                <div style="display: flex; gap: 15px; margin-top: 25px;">
                    <button type="submit" class="btn btn-primary">
                        <span id="submitText">保存</span>
                    </button>
                    <button type="button" class="btn" onclick="closeModal()">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="assets/common.js"></script>
    <script src="urls.js"></script>
</body>
</html>

